<template>
 <div class="login">
    <el-form  label-width="0" class="demo-ruleForm">
      <el-form-item>
        <el-input v-model="login.ruleForm.account" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="login.ruleForm.pass" placeholder="密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width:100%" type="primary" @click="submitLogin">立即登录</el-button>
      </el-form-item>
      <div class="oauth-box">
        <span>第三方登录：</span>
        <img title="微信" alt="微信" src="../../assets/images/wechat.svg" class="oauth-btn">
      </div>
    </el-form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      activeName: 'first',
      login:{
        ruleForm: {
          pass: '',
          account: '',
        },
      },
    }
  },
  inject:['reload'],
  mounted () {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitLogin(){
        let params = {
            account: this.login.ruleForm.account,
            password: this.login.ruleForm.pass,
          };
          this.$api.login(params)
           .then(res => {
            console.log(res)
            if(res.code == 200){
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              let username = res.data.username
              sessionStorage.setItem('user', username);
              sessionStorage.setItem('session', res.data.session_id);
              this.reload()
            }
        })
    },
  },
  components: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './login.less';

</style>